<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品档案登记</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/css/bootstrapValidator.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5 h5" style="margin-top: 20px; color: deepskyblue;padding-left: 0px;">您正在做的业务是：产品设计--产品档案管理--产品档案登记</div>
    </div>
    <form class="form-horizontal" style="margin-top: 3px" id="file_add_form">
    <div class="row">
        <div class="col-md-4 col-md-offset-10">
            <button type="button" class="btn btn-info"  id="file_add_btn">提交</button>
            <button type="button" class="btn btn-info"   id="file_clear_btn" onclick="location.reload()">清除</button>
        </div>
    </div>
    <div class="col-lg-12" style="border: 1px solid lightgrey">
        <div class="row" style="border: 1px solid gainsboro;background-color: #0e9aef;">
            <div class="col-md-12 h4" style="color: white">主信息</div>
        </div>
                <div class="form-group has-feedback" style="margin-top: 20px">
                    <label for="productName" class="col-md-1 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red;"></span>产品名称</label>
                    <div class="col-md-5" style="padding-left: 5px">
                        <input type="text" class="form-control" name="productName" id="productName" data-bv-field="productName">
                    </div>
                    <label for="factoryName" class="col-md-1 control-label" style="padding-right: 0px">制造商</label>
                    <div class="col-md-5" style="padding-left: 5px">
                        <input type="text" class="form-control" name="factoryName" id="factoryName" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="firstKindName" class="col-md-1 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red"></span>
                        I级分类</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <select class="form-control" name="firstKindName" id="firstKindName">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                    <label for="secondKindName" class="col-md-2 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red"></span>
                        II级分类</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <select class="form-control" name="secondKindName" id="secondKindName">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="thirdKindName" class="col-md-1 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red;"></span>
                        III级分类</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <select class="form-control" name="thirdKindName" id="thirdKindName">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                    <label for="productNick" class="col-md-2 control-label" style="padding-right: 0px">产品简称</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="productNick" id="productNick">
                    </div>
                </div>
                <div class="form-group">
                    <label for="type" class="col-md-1 control-label" style="padding-right: 0px">用途类型</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <select class="form-control" name="type" id="type">
                            <option value="-1">--请选择--</option>
                            <option value="Y001-1">商品</option>
                            <option value="Y001-2">物料</option>
                        </select>
                    </div>
                    <label for="productClass" class="col-md-2 control-label" style="padding-right: 0px">档次级别</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <select class="form-control" name="productClass" id="productClass">
                            <option value="-1">--请选择--</option>
                            <option value="D001-1">高档</option>
                            <option value="D001-2">中档</option>
                            <option value="D001-3">低档</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="personalUnit" class="col-md-1 control-label" style="padding-right: 0px">计量单位</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="personalUnit" id="personalUnit">
                    </div>
                    <label for="personalValue" class="col-md-2 control-label" style="padding-right: 0px">计量值</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="personalValue" id="personalValue" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="listPrice" class="col-md-1 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red"></span>
                        市场单价(元)</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="listPrice" id="listPrice">
                    </div>
                    <label for="costPrice" class="col-md-2 control-label" style="padding-right: 0px;">
                        <span class="glyphicon glyphicon-asterisk" style="color: red"></span>
                        计划成本单价</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="costPrice" id="costPrice" >
                    </div>
                </div>
                <div class="row" style="border: 1px solid gainsboro;background-color: #0e9aef;">
                    <div class="col-md-12 h4" style="color: white">辅助信息</div>
                </div>
                <div class="form-group" style="margin-top: 3px;">
                    <label for="warranty" class="col-md-1 control-label" style="padding-right: 0px;">保修期</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="warranty" id="warranty">
                    </div>
                    <label for="twinName" class="col-md-2 control-label" style="padding-right: 0px;">替代品名称</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="twinName" id="twinName" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="twinId" class="col-md-1 control-label" style="padding-right: 0px;">替代品编号</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="twinId" id="twinId" >
                    </div>
                    <label for="lifecycle" class="col-md-2 control-label" style="padding-right: 0px;">生命周期(年)</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="lifecycle" id="lifecycle">
                    </div>
                </div>
                <div class="form-group">
                    <label for="amountUnit" class="col-md-1 control-label" style="padding-right: 0px;">单位</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="amountUnit" id="amountUnit">
                    </div>
                    <label for="responsiblePerson" class="col-md-2 control-label" style="padding-right: 0px;">产品经理</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="responsiblePerson" id="responsiblePerson">
                    </div>
                </div>
                <div class="form-group">
                    <label for="providerGroup" class="col-md-1 control-label" style="padding-right: 0px;">供应商集合</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <textarea rows="3" cols="50" class="form-control" style="resize: none;overflow-y: scroll" name="providerGroup" id="providerGroup"></textarea>
                    </div>
                    <label for="productDescribe" class="col-md-2 control-label" style="padding-right: 0px;">产品描述</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <textarea rows="3" cols="50" class="form-control" style="resize: none;overflow-y: scroll" name="productDescribe" id="productDescribe"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="register" class="col-md-1 control-label" style="padding-right: 0px;">登记人</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input type="text" class="form-control" name="register" id="register" >
                    </div>
                    <label for="registerTime" class="col-md-2 control-label" style="padding-right: 0px;">建档时间</label>
                    <div class="col-md-4" style="padding-left: 5px">
                        <input style="border: none; background-color: white" readonly class="form-control" type="text" name="registerTime" id="registerTime" />
                    </div>
                </div>
    </div>
</form>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<script src="/js/currentTime.js"></script>

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrapValidator.js"></script>

<script>
    $(function (){
        //建档时间 获取当前时间
        $("#file_add_form #registerTime").val(add(fortime()))
        //调用I级分类
        fkind()

        // //表单校验
        // $("#file_add_form").bootstrapValidator({
        //     message: 'This value is not valid',
        //     feedbackIcons: {
        //         valid: 'glyphicon glyphicon-ok',
        //         invalid: 'glyphicon glyphicon-remove',
        //         validating: 'glyphicon glyphicon-refresh'
        //     },
        //     fields: {
        //         productName: {
        //             validators: {
        //                 notEmpty: {
        //                     message: '产品名称不能为空'
        //                 }
        //             }
        //         },
        //         listPrice:{
        //             validators: {
        //                 notEmpty: {
        //                     message: '市场单价不能为空'
        //                 }
        //             }
        //         },
        //         costPrice:{
        //             validators: {
        //                 notEmpty: {
        //                     message: '计划成本单价不能为空'
        //                 }
        //             }
        //         },
        //         firstKindName: {
        //             validators: {
        //                 notEmpty: {
        //                     message: '请选择I级分类'
        //                 }
        //             }
        //         },
        //         secondKindName: {
        //             validators: {
        //                 notEmpty: {
        //                     message: '请选择II级分类'
        //                 }
        //             }
        //         },
        //         thirdKindName: {
        //             validators: {
        //                 notEmpty: {
        //                     message: '请选择III级分类'
        //                 }
        //             }
        //         }
        //     }
        //
        // })

        //初始化表单验证
        formValidator()
        //点击提交按钮 --- 发送请求
        $("#file_add_btn").click(function (){
            $("#file_add_form").data("bootstrapValidator").validate();//启用验证
            let parms=$("#file_add_form").serialize()
            $.post("/design/file/add",parms,function (res){
                if(res==true){
                   window.location="../succesUI"
                }
            })
        })
    })
    //I级分类加载
    function fkind(){
        //一开始进来就发送一个请求 I级分类
        $.post("/design/file/select",{"kid":"1"},function (res) {
                $("#file_add_form #firstKindName option:gt(0)").remove()
                for(let i=0;i<res.length;i++){
                    let obj=res[i]
                    let $op=$("<option>"+obj.kindId+"/"+obj.kindName+"</option>")
                    $op.val(obj.id+"/"+obj.kindId+"/"+obj.kindName)
                    $("#firstKindName").append($op)
                }
        })

        //点击选中II级分类下拉框时，获取一级分类选中的Id
        $("#secondKindName").focus(function (){
            //获取I级分类里面下拉框的val,
            let text = $("#firstKindName").find("option:selected").val();
            //进行分割得到id
            let obj_ary=text.split("/")
            if(obj_ary[0]!=-1){
                //发送请求
                $.post("/design/file/kind",{"kid":obj_ary[0],"kindLevel":"2"},function (res) {
                    $("#file_add_form #secondKindName option:gt(0)").remove()
                    for(let i=0;i<res.length;i++){
                        let obj=res[i]
                        let $op=$("<option>"+obj.kindId+"/"+obj.kindName+"</option>")
                        $op.val(obj.id+"/"+obj.kindId+"/"+obj.kindName)
                        $("#secondKindName").append($op)
                    }
                })
            }
            if(obj_ary[0]==-1){
                $("#secondKindName option:gt(0)").remove()
            }
        })

        //点击选中III级分类下拉框时，获取二级分类选中的Id
        $("#thirdKindName").focus(function (){
            //获取I级分类里面下拉框的val,
            let text = $("#secondKindName").find("option:selected").val();
            //进行分割得到id
            let obj_ary=text.split("/")
            if(obj_ary[0]!=-1){
                //发送请求
                $.post("/design/file/kind",{"kid":obj_ary[0],"kindLevel":"3"},function (res) {
                    $("#file_add_form #thirdKindName option:gt(0)").remove()
                    for(let i=0;i<res.length;i++){
                        let obj=res[i]
                        let $op=$("<option>"+obj.kindId+"/"+obj.kindName+"</option>")
                        $op.val(obj.id+"/"+obj.kindId+"/"+obj.kindName)
                        $("#thirdKindName").append($op)
                    }
                })
            }
            if(obj_ary[0]==-1){
                $("#thirdKindName option:gt(0)").remove()
            }
        })
    }
    //form验证规则
    function formValidator() {
        $("#file_add_form").bootstrapValidator({         //formid
            message: 'This value is not valid',   //默认提示信息
            feedbackIcons: {        //提示图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                productName: {
                    message: '名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '产品名称不能为空'
                        }
                    }
                },listPrice:{
                    validators: {
                        notEmpty: {
                            message: '市场单价不能为空'
                        }
                    }
                },
                costPrice:{
                    validators: {
                        notEmpty: {
                            message: '计划成本单价不能为空'
                        }
                    }
                },
                firstKindName: {
                    validators: {
                        notEmpty: {
                            message: '请选择I级分类'
                        }
                    }
                },
                secondKindName: {
                    validators: {
                        notEmpty: {
                            message: '请选择II级分类'
                        }
                    }
                },
                thirdKindName: {
                    validators: {
                        notEmpty: {
                            message: '请选择III级分类'
                        }
                    }
                }
            }
        })
    }
</script>



</body>
</html>